<template>
  <div class="manufacturerpaymen_container">
    <!-- 输入框层 -->
    <div class="first_wrap">
      <span class="m_left_16_right_7px">厂商</span>
      <el-select
        v-model="requestData.vendor"
        placeholder="请选择"
        @change="changeVendor"
        clearable
      >
        <el-option
          v-for="item in vendorList"
          :key="item.no"
          :label="item.name"
          :value="`${item.no},${item.name}`"
        >
        </el-option>
      </el-select>
      <span class="m_left_16_right_7px">单据类型</span>
      <el-select v-model="requestData.type" placeholder="请选择">
        <el-option
          v-for="item in documentsList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <span class="m_left_16_right_7px">单号</span>
      <el-input v-model="requestData.sequence"></el-input>
      <span class="m_left_16_right_7px"> 日期</span>
      <el-date-picker
        v-model="sequenceTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="cahngeTime"
      >
      </el-date-picker>
    </div>
    <p class="line"></p>
    <div class="second_wrap">
      <el-button type="primary" icon="el-icon-search" @click="handleSearchClick"
        >查询</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-bank-card"
        @click="handleOpenNewAdd"
        >新建</el-button
      >
      <el-button
        icon="el-icon-edit-outline"
        :disabled="rowData.type !== 3"
        @click="ChangeOrder"
        >改单</el-button
      >
      <el-button
        icon="el-icon-delete-solid"
        :disabled="rowData.type !== 3"
        @click="hanldeDeleteRowClick"
        >删除</el-button
      >
      <el-button icon="el-icon-refresh-right" @click="hanldeResetClick"
        >重置</el-button
      >
    </div>
    <div class="three_wrap">
      <!-- 第一个表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '30px' }"
        show-summary
        height="55vh"
        @cell-click="handelRowClick"
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="sequence" label="单号" width="180">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row | vendorType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="manufacturerName" label="厂商">
        </el-table-column>
        <el-table-column prop="sequenceTime" label="日期">
          <template slot-scope="scope">
            <span>{{ scope.row | formatTimeString('sequenceTime') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="styleNumber" label="款号"> </el-table-column>
        <el-table-column prop="manufacturerPrice" label="单价">
        </el-table-column>
        <el-table-column prop="number" label="数量"> </el-table-column>
        <el-table-column prop="money" label="金额"> </el-table-column>
        <el-table-column prop="accountPayable" label="应付款">
        </el-table-column>
      </el-table>
      <div class="total_show">
        进货数量：{{ inputNumber }} 退货数量：{{ outNumber }} 进货金额：{{
          inputMoney
        }}
        退货金额：{{ outMoney }} 已收金额：{{ payMoney }}
      </div>
      <!--  -->
      <p class="shoukuan">收款单据</p>
      <!-- 第二个表格 -->
      <el-table
        :data="newTableData"
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '30px' }"
        height="15vh"
      >
        <el-table-column prop="sequence" label="付款序号" width="180">
        </el-table-column>
        <el-table-column prop="manufacturerName" label="厂商" width="180">
        </el-table-column>
        <el-table-column prop="money" label="付款金额"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="sequenceTimeByString" label="付款日期">
          <template slot-scope="scope">
            <span>{{
              scope.row | formatTimeString('sequenceTimeByString')
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新建 -->
    <new-add
      v-if="isNewAdd"
      @handleCloseNewAdd="handleCloseNewAdd"
      @sendNewData="handelSendNewData"
    ></new-add>
    <!-- 改单的组件 -->
    <ChangeOrder
      v-if="isOrderDialog"
      @closeOrderDialog="closeOrderDialog"
      @updateDataList="handleSearchClick"
      :rowData="rowData"
    />
  </div>
</template>

<script>
// 改单组件
import ChangeOrder from './ChildComps/ChangeOrder.vue'
import newAdd from './ChildComps/newAdd.vue'

import {
  getManufacturer,
  getManufacturerList,
  refreshManufacturer,
  deleteManufacturer
} from '@/request/accounting/ManufacturerPayment'
export default {
  components: {
    ChangeOrder,
    newAdd
  },
  data() {
    return {
      requestData: {
        manufacturerNo: '', // 厂商编号
        manufacturerName: '', // 厂商名称
        type: '', // 单据类型（1厂进2厂退3厂商付款）
        sequence: '', // 单号
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      sequenceTime: '',
      vendorList: [], // 厂商
      documentsList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '厂进'
        },
        {
          value: '2',
          label: '厂退'
        },
        {
          value: '3',
          label: '付款'
        }
      ], // 单据类型
      inputMoney: 0,
      inputNumber: 0,
      outMoney: 0,
      outNumber: 0,
      payMoney: 0,
      // 控制改单的显示和隐藏
      isOrderDialog: false, // 改单
      isNewAdd: false, // 新建
      tableData: [],
      newTableData: [],
      rowData: {}
    }
  },
  created() {
    this.getManufacturer()
  },
  methods: {
    // 获取厂商
    async getManufacturer() {
      const { data } = await getManufacturer()
      if (data && data.code === 200) {
        this.vendorList = data.data
      }
    },
    // 查询
    async handleSearchClick() {
      if (!this.requestData.manufacturerNo)
        return this.$message.error('请选择厂商')
      const { data } = await getManufacturerList(this.requestData)
      if (data && data.code === 200) {
        this.tableData = data.data.list
        this.inputMoney = data.data.inputMoney
        this.inputNumber = data.data.inputNumber
        this.outMoney = data.data.outMoney
        this.outNumber = data.data.outNumber
        this.payMoney = data.data.payMoney
      }
    },
    // 改单
    ChangeOrder() {
      const rowData = JSON.stringify(this.rowData)
      if (rowData == '{}') return this.$message.error('请选择要改单的数据')
      this.closeOrderDialog()
    },
    // 删除
    hanldeDeleteRowClick() {
      const rowData = JSON.stringify(this.rowData)
      if (rowData == '{}') return this.$message.error('请选择要删除的数据')
      this.$confirm('此操作将永久删除数据,是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const params = {
          id: this.rowData.id
        }
        const { data } = await deleteManufacturer(params)
        if (data && data.code === 200) {
          this.$message.success(data.msg)
          this.handleSearchClick()
          this.rowData = {}
        }
      })
    },
    // 重置、
    hanldeResetClick() {
      if (!this.requestData.manufacturerNo)
        return this.$message.error('请选择厂商')
      this.$confirm('此操作将耗时较长,是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const params = {
          manufacturerNo: this.requestData.manufacturerNo
        }
        const { data } = await refreshManufacturer(params)
        if (data && data.code === 200) {
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 选择当前 row
    handelRowClick(row) {
      // console.log(row)
      this.rowData = row
    },
    // 选择厂商
    changeVendor(value) {
      if (value) {
        this.requestData.manufacturerNo = value.split(',')[0]
        this.requestData.manufacturerName = value.split(',')[1]
      } else {
        this.requestData.manufacturerNo = ''
        this.requestData.manufacturerName = ''
      }
    },
    // 接收新建数据
    handelSendNewData(data) {
      this.newTableData.push(data)
    },
    // 选择时间
    cahngeTime(date) {
      if (date) {
        this.requestData.startTime = `${date[0]} 00:00:00`
        this.requestData.endTime = `${date[1]} 23:59:59`
      } else {
        this.requestData.startTime = ''
        this.requestData.endTime = ''
      }
    },
    handleOpenNewAdd() {
      this.handleCloseNewAdd()
    },
    handleCloseNewAdd() {
      this.isNewAdd = !this.isNewAdd
    },
    handleOpenOrder() {
      this.closeOrderDialog()
    },
    // 监听子组件关闭
    closeOrderDialog() {
      this.isOrderDialog = !this.isOrderDialog
    }
  }
}
</script>

<style lang="less" scoped>
.total_show {
  width: 100%;
  height: 36px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.manufacturerpaymen_container {
  background-color: #fff;
  padding: 10px;
  // 时间的样式
  // 时间选择器的样式（双个）
  /deep/.el-date-editor {
    width: 300px;
    height: 32px;
    // 在这个高度上，调整这个时钟icon的行高居中
    .el-range__icon {
      line-height: 27px;
    }
    // 在这个高度上调整这个 '至'显示居中
    .el-range-separator {
      line-height: 26px;
      width: 8%;
    }
  }
  //输入框的样式
  // input输入框的样式
  /deep/.el-input {
    //icon样式
    .el-input__icon {
      line-height: 34px;
    }
    // 宽度生效
    width: 160px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
}
.first_wrap {
  display: flex;
  align-items: center;
}
.line {
  background: #f7f7f7;
  width: 100%;
  height: 2px;
  margin: 16px 0;
}
.second_wrap {
  margin-bottom: 16px;
}
.shoukuan {
  font-weight: bold;
  color: #222222;
  margin: 13px 0;
}
.m_right_7px {
  margin-right: 7px;
}
.m_left_16_right_7px {
  margin-right: 7px;
  margin-left: 16px;
}
</style>
